<template>
  <div class="settings-page">
    <el-page-header title="返回" content="插件配置" class="page-header" />
    
    <el-tabs v-model="activeTab" class="settings-tabs" type="border-card">
      <el-tab-pane label="拦截规则" name="rules">
        <el-card class="config-card">
          <template #header>
            <div class="card-header">
              <span>拦截规则管理</span>
              <div class="header-actions">
                <el-dropdown @command="handlePresetRule">
                  <el-button type="primary" icon="Plus">
                    添加规则
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="custom">自定义规则</el-dropdown-item>
                      <el-dropdown-item command="zcy_orders">政采云订单查询</el-dropdown-item>
                      <el-dropdown-item command="hz_bank">杭州银行流水</el-dropdown-item>
                      <el-dropdown-item command="zcy_announce">政采云公告</el-dropdown-item>
                      <el-dropdown-item command="zcy_search">政采云商品搜索</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </template>
          
          <el-table :data="rules" style="width: 100%" stripe border>
            <el-table-column prop="name" label="规则名称" width="200">
              <template #default="scope">
                <el-tag :type="scope.row.enabled ? 'success' : 'danger'">
                  {{ scope.row.name }}
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column prop="urlPattern" label="URL匹配模式" show-overflow-tooltip>
              <template #default="scope">
                <el-tag type="info">{{ scope.row.urlPattern }}</el-tag>
              </template>
            </el-table-column>
            
            <el-table-column prop="dataType" label="数据类型" width="120" align="center">
              <template #default="scope">
                <el-tag 
                  :type="scope.row.dataType === 'bank' ? 'primary' : 
                         scope.row.dataType === 'sales_order' ? 'success' : 
                         scope.row.dataType === 'purchase_order' ? 'warning' : 
                         scope.row.dataType === 'incoming_invoice' ? 'danger' : 
                         scope.row.dataType === 'outgoing_invoice' ? 'info' : 
                         scope.row.dataType === 'announcement' ? '' : 
                         scope.row.dataType === 'product_search' ? 'warning' : 'default'">
                  {{ formatDataType(scope.row.dataType) }}
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column prop="apiEndpoint" label="API端点" show-overflow-tooltip>
              <template #default="scope">
                <el-tag type="primary">{{ scope.row.apiEndpoint }}</el-tag>
              </template>
            </el-table-column>
            
            <el-table-column label="启用状态" width="100" align="center">
              <template #default="scope">
                <el-switch 
                  v-model="scope.row.enabled" 
                  @change="toggleRule(scope.row)"
                  :loading="scope.row.loading"
                />
              </template>
            </el-table-column>
            
            <el-table-column label="捕获HTML" width="100" align="center">
              <template #default="scope">
                <el-switch 
                  v-model="scope.row.captureHtml" 
                  disabled
                />
              </template>
            </el-table-column>
            
            <el-table-column label="提取ShopId" width="120" align="center">
              <template #default="scope">
                <el-switch 
                  v-model="scope.row.extractShopId" 
                  disabled
                />
              </template>
            </el-table-column>
            
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="openRuleDialog(scope.row)" icon="Edit">
                  编辑
                </el-button>
                <el-button size="small" type="danger" @click="deleteRule(scope.row)" icon="Delete">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="API配置" name="api">
        <el-card class="config-card">
          <template #header>
            <div class="card-header">
              <span>API服务配置</span>
              <el-button type="primary" @click="saveApiConfig" icon="Check">保存配置</el-button>
            </div>
          </template>
          
          <el-form :model="apiConfig" label-width="120px" class="config-form">
            <el-form-item label="API基础地址">
              <el-input v-model="apiConfig.baseUrl" placeholder="https://api.xiaocai.com" />
            </el-form-item>
            
            <el-form-item label="认证Token">
              <el-input 
                v-model="apiConfig.token" 
                placeholder="请输入API Token" 
                type="password"
                show-password
              />
            </el-form-item>
            
            <el-form-item label="超时时间(秒)">
              <el-input-number v-model="apiConfig.timeout" :min="1" :max="300" />
            </el-form-item>
            
            <el-form-item label="请求重试">
              <el-switch v-model="apiConfig.retry" />
            </el-form-item>
            
            <el-form-item label="重试次数">
              <el-input-number v-model="apiConfig.retryCount" :min="1" :max="10" :disabled="!apiConfig.retry" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="存储配置" name="storage">
        <el-card class="config-card">
          <template #header>
            <div class="card-header">
              <span>数据存储配置</span>
            </div>
          </template>
          
          <el-form :model="storageConfig" label-width="150px" class="config-form">
            <el-form-item label="自动同步到服务器">
              <el-switch v-model="storageConfig.autoSync" />
            </el-form-item>
            
            <el-form-item label="本地最大存储数量">
              <el-input-number v-model="storageConfig.maxLocalItems" :min="1" :max="10000" />
            </el-form-item>
            
            <el-form-item label="数据保留天数">
              <el-input-number v-model="storageConfig.retentionDays" :min="1" :max="365" />
            </el-form-item>
            
            <el-form-item label="存储空间清理">
              <el-button @click="cleanStorage" icon="Delete">清理存储空间</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="高级选项" name="advanced">
        <el-card class="config-card">
          <template #header>
            <div class="card-header">
              <span>高级选项</span>
              <div>
                <el-button @click="debugRules" icon="InfoFilled">查看规则</el-button>
                <el-button @click="forceUpdateRules" icon="Refresh">强制更新</el-button>
              </div>
            </div>
          </template>
          
          <el-form :model="advancedConfig" label-width="120px" class="config-form">
            <el-form-item label="启用调试模式">
              <el-switch v-model="advancedConfig.debugMode" />
            </el-form-item>
            
            <el-form-item label="启用桌面通知">
              <el-switch v-model="advancedConfig.enableNotification" />
            </el-form-item>
            
            <el-form-item label="日志级别">
              <el-select v-model="advancedConfig.logLevel" placeholder="请选择日志级别" style="width: 100%">
                <el-option label="错误" value="error"></el-option>
                <el-option label="警告" value="warn"></el-option>
                <el-option label="信息" value="info"></el-option>
                <el-option label="调试" value="debug"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="数据加密">
              <el-switch v-model="advancedConfig.encryptData" />
            </el-form-item>
          </el-form>
          
          <el-divider>数据管理</el-divider>
          
          <div class="data-actions">
            <el-button type="danger" @click="clearAllData" icon="Delete">
              🗑️ 清空所有数据
            </el-button>
            <el-button @click="exportConfig" icon="Upload">
              📤 导出配置
            </el-button>
            <el-button @click="importConfig" icon="Download">
              📥 导入配置
            </el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 规则编辑弹窗 -->
    <el-dialog 
      :title="ruleForm.id ? '编辑拦截规则' : '添加拦截规则'" 
      v-model="ruleDialogVisible" 
      width="600px"
      :before-close="handleRuleDialogClose"
    >
      <el-form :model="ruleForm" :rules="ruleRules" ref="ruleFormRef" label-width="120px">
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入规则名称" />
        </el-form-item>
        
        <el-form-item label="匹配类型">
          <el-select v-model="ruleForm.matchType" placeholder="请选择匹配类型" style="width: 100%">
            <el-option label="包含匹配" value="includes"></el-option>
            <el-option label="精确匹配" value="exact"></el-option>
            <el-option label="前缀匹配" value="startsWith"></el-option>
            <el-option label="后缀匹配" value="endsWith"></el-option>
            <el-option label="正则表达式" value="regex"></el-option>
          </el-select>
          <div class="form-tip">
            选择URL匹配方式，默认为包含匹配
          </div>
        </el-form-item>
        
        <el-form-item label="URL匹配模式" prop="urlPattern">
          <el-input v-model="ruleForm.urlPattern" placeholder="请输入URL匹配模式" />
          <div class="form-tip" v-if="ruleForm.matchType === 'regex'">
            正则表达式示例：^/api/mall/order/list/\d+$ (匹配数字ID) 或 ^/api/mall/order/list/[a-zA-Z]+$ (匹配字母ID)
          </div>
          <div class="form-tip" v-else-if="!ruleForm.id">
            示例：/api/orders/search
          </div>
        </el-form-item>
        
        <el-form-item label="HTTP方法">
          <el-select v-model="ruleForm.method" placeholder="请选择HTTP方法" style="width: 100%">
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
            <el-option label="PATCH" value="PATCH"></el-option>
          </el-select>
          <div class="form-tip">
            选择要拦截的HTTP方法，不选择则拦截所有方法
          </div>
        </el-form-item>
        
        <el-form-item label="API端点" prop="apiEndpoint">
          <el-input v-model="ruleForm.apiEndpoint" placeholder="请输入API端点" />
          <div class="form-tip" v-if="!ruleForm.id">
            示例：https://api.xiaocai.com/orders
          </div>
        </el-form-item>
        
        <el-form-item label="数据类型" prop="dataType">
          <el-select v-model="ruleForm.dataType" placeholder="请选择数据类型" style="width: 100%">
            <el-option label="银行流水" value="bank"></el-option>
            <el-option label="销售订单" value="sales_order"></el-option>
            <el-option label="采购订单" value="purchase_order"></el-option>
            <el-option label="进项发票" value="incoming_invoice"></el-option>
            <el-option label="销项发票" value="outgoing_invoice"></el-option>
            <el-option label="公告信息" value="announcement"></el-option>
            <el-option label="页面HTML" value="page_html"></el-option>
            <el-option label="商品搜索" value="product_search"></el-option>
            <el-option label="其他数据" value="other"></el-option>
          </el-select>
          <div class="form-tip">
            指定数据类型，用于分类处理
          </div>
        </el-form-item>
        
        <el-form-item label="启用状态">
          <el-switch v-model="ruleForm.enabled" />
        </el-form-item>
        
        <el-form-item label="捕获页面HTML">
          <el-switch v-model="ruleForm.captureHtml" />
          <div class="form-tip">
            开启后将捕获匹配页面的完整HTML内容
          </div>
        </el-form-item>
        
        <el-form-item label="提取ShopId">
          <el-switch v-model="ruleForm.extractShopId" />
          <div class="form-tip">
            开启后将从POST请求体中提取shopId参数
          </div>
        </el-form-item>
        
        <el-form-item label="ShopId列表" v-if="ruleForm.extractShopId">
          <el-select 
            v-model="ruleForm.targetShopIds" 
            multiple 
            filterable 
            allow-create 
            default-first-option
            placeholder="请输入ShopId（可多选，回车确认）"
            style="width: 100%">
            <el-option 
              v-for="item in ruleForm.targetShopIds" 
              :key="item" 
              :label="item" 
              :value="item">
            </el-option>
          </el-select>
          <div class="form-tip">
            输入要拦截的ShopId，按回车确认添加，可添加多个
          </div>
        </el-form-item>
        
        <el-form-item label="描述">
          <el-input 
            v-model="ruleForm.description" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入规则描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ruleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRule">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 高级配置抽屉 -->
    <el-drawer 
      title="高级配置详情" 
      v-model="drawerVisible" 
      direction="rtl" 
      size="50%"
    >
      <div class="drawer-content">
        <el-tabs v-model="drawerActiveTab" type="card">
          <el-tab-pane label="配置详情" name="details">
            <el-descriptions title="当前配置详情" :column="1" border>
              <el-descriptions-item label="API基础地址">{{ apiConfig.baseUrl }}</el-descriptions-item>
              <el-descriptions-item label="认证Token">{{ apiConfig.token ? '已设置' : '未设置' }}</el-descriptions-item>
              <el-descriptions-item label="超时时间">{{ apiConfig.timeout }}秒</el-descriptions-item>
              <el-descriptions-item label="请求重试">{{ apiConfig.retry ? '启用' : '禁用' }}</el-descriptions-item>
              <el-descriptions-item label="重试次数">{{ apiConfig.retryCount }}次</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          
          <el-tab-pane label="存储详情" name="storage">
            <el-descriptions title="存储配置详情" :column="1" border>
              <el-descriptions-item label="自动同步">{{ storageConfig.autoSync ? '启用' : '禁用' }}</el-descriptions-item>
              <el-descriptions-item label="最大存储数量">{{ storageConfig.maxLocalItems }}条</el-descriptions-item>
              <el-descriptions-item label="保留天数">{{ storageConfig.retentionDays }}天</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          
          <el-tab-pane label="高级选项" name="advanced">
            <el-descriptions title="高级选项详情" :column="1" border>
              <el-descriptions-item label="调试模式">{{ advancedConfig.debugMode ? '启用' : '禁用' }}</el-descriptions-item>
              <el-descriptions-item label="桌面通知">{{ advancedConfig.enableNotification ? '启用' : '禁用' }}</el-descriptions-item>
              <el-descriptions-item label="日志级别">{{ advancedConfig.logLevel }}</el-descriptions-item>
              <el-descriptions-item label="数据加密">{{ advancedConfig.encryptData ? '启用' : '禁用' }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useConfig } from '../composables/useConfig'

// 使用composable
const {
  rules,
  apiConfig,
  storageConfig,
  advancedConfig,
  addRule,
  editRule,
  deleteRule,
  toggleRule,
  saveApiConfig,
  loadConfig
} = useConfig()

// 在组件挂载时确保配置已加载
onMounted(() => {
  console.log('⚙️ SettingsPage 组件已挂载');
  // 手动加载最新配置
  loadConfig();
})

const activeTab = ref('rules')
const drawerActiveTab = ref('details')

// 规则表单相关
const ruleDialogVisible = ref(false)
const ruleFormRef = ref()
const ruleForm = reactive({
  id: '',
  name: '',
  urlPattern: '',
  matchType: 'includes',  // 添加匹配类型字段
  method: '',  // 添加HTTP方法字段
  apiEndpoint: '',
  dataType: 'other',  // 添加数据类型字段，默认为other
  enabled: true,
  captureHtml: false,  // 添加捕获HTML字段，默认为false
  extractShopId: false,  // 添加提取ShopId字段，默认为false
  targetShopIds: [],  // 添加目标ShopId列表字段，默认为空数组
  description: ''
})

const ruleRules = {
  name: [
    { required: true, message: '请输入规则名称', trigger: 'blur' }
  ],
  urlPattern: [
    { required: true, message: '请输入URL匹配模式', trigger: 'blur' }
  ],
  apiEndpoint: [
    { required: true, message: '请输入API端点', trigger: 'blur' }
  ],
  dataType: [
    { required: true, message: '请选择数据类型', trigger: 'blur' }
  ]
}

// 抽屉相关
const drawerVisible = ref(false)

// 处理预设规则
const handlePresetRule = (command) => {
  switch (command) {
    case 'zcy_orders':
      Object.assign(ruleForm, {
        id: '',
        name: '📦 政采云订单查询',
        urlPattern: '^/api/mall/order/list$',
        matchType: 'regex',  // 正则表达式匹配
        method: 'POST',  // 添加HTTP方法
        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
        dataType: 'sales_order',  // 添加数据类型
        enabled: true,
        captureHtml: false,  // 添加捕获HTML字段
        extractShopId: false,  // 添加提取ShopId字段
        targetShopIds: [],  // 添加目标ShopId列表字段
        description: '拦截政采云订单查询接口'
      })
      break
    case 'hz_bank':
      Object.assign(ruleForm, {
        id: '',
        name: '🏦 杭州银行流水',
        urlPattern: '/uc-server/service/hzDealDetailReport/hzDealDetailQuery',
        matchType: 'includes',  // 包含匹配
        method: '',  // 空值表示拦截所有方法
        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
        dataType: 'bank',  // 添加数据类型
        enabled: true,
        captureHtml: false,  // 添加捕获HTML字段
        extractShopId: false,  // 添加提取ShopId字段
        targetShopIds: [],  // 添加目标ShopId列表字段
        description: '拦截杭州银行流水查询接口'
      })
      break
    case 'zcy_announce':
      Object.assign(ruleForm, {
        id: '',
        name: '📢 政采云公告',
        urlPattern: '/announcement/lobby/queryPage',
        matchType: 'includes',  // 包含匹配
        method: '',  // 空值表示拦截所有方法
        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
        dataType: 'announcement',  // 添加数据类型
        enabled: true,
        captureHtml: false,  // 添加捕获HTML字段
        extractShopId: false,  // 添加提取ShopId字段
        targetShopIds: [],  // 添加目标ShopId列表字段
        description: '拦截政采云公告查询接口'
      })
      break
    case 'zcy_search':
      Object.assign(ruleForm, {
        id: '',
        name: '🔍 政采云商品搜索',
        urlPattern: '/front/index/search/search',
        matchType: 'includes',  // 包含匹配
        method: 'POST',  // POST方法
        apiEndpoint: 'http://127.0.0.1:9001/api/v1/plugin/data/receive',
        dataType: 'product_search',  // 商品搜索数据类型
        enabled: true,
        captureHtml: false,  // 不捕获HTML
        extractShopId: true,  // 提取ShopId
        targetShopIds: [],  // 默认为空，支持手工填写
        description: '拦截政采云商品搜索接口，提取shopId参数'
      })
      break
    default:
      // 自定义规则
      Object.assign(ruleForm, {
        id: '',
        name: '',
        urlPattern: '',
        apiEndpoint: '',
        dataType: 'other',  // 添加数据类型
        enabled: true,
        captureHtml: false,  // 添加捕获HTML字段
        extractShopId: false,  // 添加提取ShopId字段
        targetShopIds: [],  // 添加目标ShopId列表字段
        description: ''
      })
  }
  ruleDialogVisible.value = true
  nextTick(() => {
    ruleFormRef.value?.clearValidate()
  })
}

// 打开规则对话框
const openRuleDialog = (rule) => {
  if (rule) {
    // 编辑模式
    Object.assign(ruleForm, rule)
    // 确保targetShopIds是数组格式
    if (rule.targetShopIds) {
      if (Array.isArray(rule.targetShopIds)) {
        // 如果已经是数组格式，直接使用
        ruleForm.targetShopIds = rule.targetShopIds
      } else if (typeof rule.targetShopIds === 'object') {
        // 如果是对象格式，转换为数组
        ruleForm.targetShopIds = Object.values(rule.targetShopIds)
      } else {
        // 其他情况初始化为空数组
        ruleForm.targetShopIds = []
      }
    } else {
      ruleForm.targetShopIds = []
    }
  } else {
    // 新增模式（默认为空）
    Object.assign(ruleForm, {
      id: '',
      name: '',
      urlPattern: '',
      matchType: 'includes',  // 添加匹配类型字段
      method: '',  // 添加HTTP方法字段
      apiEndpoint: '',
      dataType: 'other',  // 添加数据类型字段
      enabled: true,
      captureHtml: false,  // 添加捕获HTML字段
      extractShopId: false,  // 添加提取ShopId字段
      targetShopIds: [],  // 添加目标ShopId列表字段
      description: ''
    })
  }
  ruleDialogVisible.value = true
  nextTick(() => {
    ruleFormRef.value?.clearValidate()
  })
}

// 处理规则对话框关闭
const handleRuleDialogClose = (done) => {
  ElMessageBox.confirm('确定要关闭对话框吗？未保存的更改将丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    done()
  }).catch(() => {
    // 取消关闭
  })
}

// 保存规则
const saveRule = () => {
  if (!ruleFormRef.value) return
  
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // 处理targetShopIds，确保是数组格式
      const ruleToSave = { ...ruleForm }
      
      if (ruleForm.id) {
        // 编辑模式
        editRule(ruleToSave)
      } else {
        // 新增模式
        addRule(ruleToSave)
      }
      ruleDialogVisible.value = false
    }
  })
}

// 清空所有数据
const clearAllData = () => {
  ElMessageBox.confirm('⚠️ 警告：此操作将清空所有拦截的数据，且无法恢复！是否继续？', '清空数据', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    ElMessageBox.prompt('请输入 "DELETE" 确认删除:', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^DELETE$/,
      inputErrorMessage: '请输入 "DELETE" 确认删除'
    }).then(({ value }) => {
      ElMessage.success('所有数据已清空')
    }).catch(() => {
      ElMessage.info('已取消操作')
    })
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 导出配置
const exportConfig = () => {
  ElMessage.success('配置导出功能待实现')
}

// 导入配置
const importConfig = () => {
  ElMessage.success('配置导入功能待实现')
}

// 清理存储空间
const cleanStorage = () => {
  ElMessageBox.confirm('确定要清理存储空间吗？', '清理存储', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('存储空间清理完成')
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 打开抽屉
const openDrawer = () => {
  drawerVisible.value = true
}

// 调试函数：查看当前存储中的规则
const debugRules = () => {
  chrome.storage.local.get(['interceptionRules'], (result) => {
    console.log('🔍 调试信息 - 当前存储中的拦截规则:', result);
    // 显示规则详情
    if (result && result.interceptionRules) {
      console.log('📋 拦截规则详情:');
      result.interceptionRules.forEach((rule, index) => {
        console.log(`  ${index + 1}. ${rule.name} - ${rule.urlPattern} (启用: ${rule.enabled})`);
      });
    }
    ElMessage.info('已输出当前拦截规则到控制台');
  });
}

// 调试函数：手动触发规则更新
const forceUpdateRules = () => {
  // 发送一个消息到content script，触发规则更新检查
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    if (tabs[0]) {
      chrome.tabs.sendMessage(tabs[0].id, {action: 'checkRulesUpdate'}, (response) => {
        if (chrome.runtime.lastError) {
          console.log('无法发送消息到content script:', chrome.runtime.lastError);
          ElMessage.error('无法发送消息到页面');
        } else {
          console.log('已发送规则更新检查消息:', response);
          ElMessage.success('已触发规则更新检查');
        }
      });
    }
  });
}

const formatDataType = (dataType) => {
  switch (dataType) {
    case 'bank':
      return '🏦 银行流水'
    case 'sales_order':
      return '💰 销售订单'
    case 'purchase_order':
      return '🛒 采购订单'
    case 'incoming_invoice':
      return '🧾 进项发票'
    case 'outgoing_invoice':
      return '🧾 销项发票'
    case 'announcement':
      return '📢 公告信息'
    case 'page_html':
      return '🌐 页面HTML'
    case 'product_search':
      return '🔍 商品搜索'
    default:
      return '📄 其他数据'
  }
}

</script>

<style scoped>
.settings-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.settings-tabs {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.settings-tabs :deep(.el-tabs__header) {
  margin: 0;
  background: #f5f7fa;
}

.config-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.config-form {
  padding: 20px 0;
}

.data-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.drawer-content {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>
















































































